<template>
  <div class="loginpage">
    <div class="loginbox">
      <p>后台管理系统</p>
      <el-form
        :model="loginform"
        :rules="rules"
        ref="loginform"
        style="width: 300px; margin: 15px auto"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginform.adminname"
            placeholder="用户名"
            class="input_style"
            clearable
          >
            <template #prefix>
              <el-icon>
                <Avatar />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="input_style" clearable>
          <el-input
            type="password"
            v-model="loginform.password"
            placeholder="密码"
            show-password
          >
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button @click="login">登录</el-button>
    </div>
  </div>
</template>
<script>
import { Avatar, Lock } from "@element-plus/icons-vue";
import request from "@/api/http";
export default {
  name: "login",
  components: {
    Avatar,
    Lock,
  },
  data() {
    return {
      loginform: {
        adminname: "",
        password: "",
      },
      //输入格式检查
      rules: {
        adminname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "用户名长度错误", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //登陆进入系统
    login() {
      request.post("/admin/login", this.loginform).then((res) => {
        if (res.code == 1) {
          console.log(res.code);
          this.$message({
            type: "success",
            message: "登陆成功！",
          });
          //缓存存取管理员用户名
          localStorage.setItem("adminname", this.loginform.adminname);
          sessionStorage.setItem("TOKEN", res.TOKEN);
          this.$router.push("/home/userInfo");
        }
        //登陆失败提示
        else {
          console.log(res.code);
          this.$message({
            type: "error",
            message: "用户名或密码错误",
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
p {
  font-size: large;
  font-weight: bolder;
  color: rgb(117, 192, 117);
}

.loginpage {
  background: url("../assets/background/3.jpg");
  background-repeat: no-repeat;
  background-position: center 0;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.loginbox {
  position: absolut;
  text-align: center;
  margin: 30vh auto;
  padding: 25px;
  width: 400px;
  background-color: aliceblue;
  opacity: 0.9;
  border-radius: 15px;
}

.icon_avator {
  background: url("@/assets/icon/avatar.png");
  height: 25px;
  width: 25px;
  background-size: 25px;
  background-repeat: no-repeat;
  display: block;
}
.input_style /deep/ .el-input__wrapper {
  box-shadow: none;
  background-color: aliceblue;
  border-bottom: 1px solid grey;
}
</style>
